ReactDOM.render 是如何串联渲染链路的|原理篇 | 前端进阶之旅

⚡ 30 秒速记

核心判断：Fiber 把不可中断的递归遍历改造成可保存进度的工作单元，使渲染阶段能够调度、暂停和恢复
原理主线：围绕「一、ReactDOM.render 调用」、「二、初始化阶段」、「三、render 阶段」建立输入、状态变化与输出之间的因果关系
文章范围：解析了 ReactDOM.render 在 Fiber 架构下的渲染流程，结合源码讲解首次渲染时的初始化、render 阶段和 commit 阶段的执行机制，帮助读者全面理解 React 渲染链路的原理和调用栈分层。
边界与代价：可中断的是渲染计算，提交阶段仍需保持一致性；React 18+ 并发能力也不等于所有更新都并行执行
工程落地：优化时先减少无效工作和长任务，再结合优先级、过渡更新和切片机制改善响应性

ReactDOM.render 会依次串起根节点初始化、render 阶段构建 Fiber 树，以及 commit 阶段更新真实 DOM。 首次渲染先创建 fiberRoot 和作为虚拟树根节点的 rootFiber，再由 updateContainer 创建更新、写入队列并调用 scheduleUpdateOnFiber。在旧版 legacy 模式下，这条链路会进入 performSyncWorkOnRoot 同步完成渲染，最后通过 commitRoot 提交结果。需要注意这是历史实现，React 19 已移除该 API，当前入口应使用 createRoot。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

从本讲开始，我们将以首次渲染为切入点，拆解 Fiber 架构下 ReactDOM.render 所触发的渲染链路，结合源码理解整个链路中所涉及的初始化、render 和 commit 等过程

# 一、ReactDOM.render 调用栈的逻辑分层

开篇先给到你一个简单的 React AppDemo：

import React from "react";
import ReactDOM from "react-dom";

function App() {
    return (
      <div className="App">
        <div className="container">
          <h1>我是标题</h1>
          <p>我是第一段话</p>
          <p>我是第二段话</p>
        </div>
      </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);